<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Default box -->
            <div class="card card-primary card-outline">
                <div class="card-body">
                    <div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
                        <button id="btn_add" type="button" class="btn btn-success">
                            <span class="fa fa-plus" aria-hidden="true"></span> 新增
                        </button>
                    </div>
                    <table id="table" class="table table-hover"></table>
                </div>
                <!-- /.card-body -->
            </div>
        </div>
        <!-- /.card -->
    </div>
</div>
<script>

    //根据窗口调整表格高度
    $(window).resize(function () {
        $('#table').bootstrapTable('resetView', {
            height: tableHeight()
        })
    });
    $(function () {
        $('#table').bootstrapTable({
            contentType: "application/x-www-form-urlencoded",//必须要有！！！！
            url: '/admin/api/menu/list',             //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: false,                   //是否显示分页（*）
            dataField: "data",//
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: 'queryParams',         //传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            search: false,                      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            showColumns: true,                 //是否显示所有的列
            showRefresh: true,                 //是否显示刷新按钮
            clickToSelect: true,                //是否启用点击选中行
            height: tableHeight,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            queryParamsType: "limit",
            toolbarAlign: "left",
            buttonsAlign: "right",
            locale: "zh-CN",//中文支持
            buttonsClass: "success",
            treeView: true,
            treeId: "id",
            treeField: "menu_name",
            class: 'table table-hover table-bordered',
            treeCollapseAll: false,
            collapseIcon: "fa fa-chevron-right",
            expandIcon: "fa fa-chevron-down",
            columns: [
                {
                    title: '全选',
                    // field: '',
                    //复选框
                    checkbox: true,
                    width: 25,
                    align: 'center',
                    valign: 'middle',
                },
                {
                    field: 'id',
                    title: "ID",
                    width: 30
                },
                {
                    field: 'menu_name',
                    title: '名称',
                    formatter: function (value, row, index) {
                        return '&nbsp;<span class="fa ' + row.icon + '" aria-hidden="true"></span>&nbsp;' + value;
                    }
                },
                {
                    title: '级别',
                    field: 'level',
                    align: 'center',
                    formatter: function (value, row, index) {
                        let button = '';
                        if (value === 1) {
                            button = '<label class="badge badge-primary">导航</label>';
                        } else if (value === 2) {
                            button = '<label class="badge badge-info">菜单</label>';
                        } else {
                            button = '<label class="badge badge-success">按钮</label>';
                        }
                        return button;
                    }
                },
                {
                    title: "链接地址",
                    field: "menu_url",
                },
                {
                    field: '',
                    title: '管理',
                    halign: 'center',
                    align: 'center',
                    width: '320px',
                    formatter: optionFormatter
                }
            ],                     //列设置
            responseHandler: function (res) {
                //在ajax获取到数据，渲染表格之前，修改数据源
                for (var i = 0; i < res.data.length; i++) {
                    res.data[i]['parentId'] = res.data[i]['pid'] !== 0 ? res.data[i]['pid'] : null;
                }
                return res;
            },
            onResetView: function (data) {
            }

        });
    });

    function optionFormatter(value, row, index) {
        let button = '';
        button += '<a class="btn btn-sm btn-info" href="/admin/menu/edit?id=' + row.id + '">修改</a>&nbsp;';
        button += '<a class="btn btn-sm btn-danger" id="delete" href="javascript:void(0)" onclick="deleteRow(' + row.id + ')" data-id=' + row.id + '>删除</a>&nbsp;';
        return button;
    }

    function deleteRow(id) {
        Swal.fire({
            title: '确定删除吗?',
            text: "您将无法恢复它!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '确定删除!',
            cancelButtonText: '取消删除!',
            // showLoaderOnConfirm: true,
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    url: '/admin/api/menu/delete?id=' + id,
                    type: "post",
                    dataType: "json",
                    success: function (res) {
                        if (res.code === 1) {
                            Swal.fire(
                                {
                                    icon: 'success',
                                    title: '已删除！',
                                    text: '删除成功:)',
                                    showConfirmButton: false,
                                    timer: 1500,
                                    timerProgressBar: true,
                                }
                            ).then((r) => {
                                $("#table").bootstrapTable('refresh');
                            });

                        } else {
                            Swal.fire(
                                {
                                    icon: 'error',
                                    title: '失败！',
                                    text: '删除失败:)',
                                    showConfirmButton: false,
                                    timer: 1500,
                                    timerProgressBar: true,
                                }
                            );
                        }
                    },
                    error: function (d) {
                        Swal.fire(
                            {
                                icon: 'error',
                                title: '失败！' + d.status,
                                text: '服务器错误:)' + d.statusText,
                                showConfirmButton: false,
                                timer: 1500,
                                timerProgressBar: true,
                            }
                        );
                    }
                })
            } else {
                Swal.fire(
                    {
                        icon: 'warning',
                        title: '已取消',
                        showConfirmButton: false,
                        timer: 1500,
                        timerProgressBar: true,
                    }
                );
            }
        });
    }

    //请求服务数据时所传参数
    function queryParams(params) {
        return {
            //每页多少条数据
            limit: params.limit,
            //请求第几页
            page: params.offset / params.limit + 1
        }
    }

    //三个参数，value代表该列的值
    function statusFormatter(value, row, index) {
        if (value === 2) {
            return '<i class="fa fa-lock" style="color:red"></i>'
        } else if (value === 0) {
            return '<i class="fa fa-unlock" style="color:green"></i>'
        } else {
            return '数据错误'
        }
    }

    $('#btn_add').click(function () {
        window.location.href = '/admin/menu/create'
    });

    //tableHeight函数
    function tableHeight() {
        //可以根据自己页面情况进行调整
        return $(window).height() - 280;
    }

</script>